<template>
    <view class="king">
        <view class="king_til">
            <view class="paiming"><text class="colororg">购买排名</text></view>
            <view class="zongjine">
                <view class="jineone">
                    <text>总金额</text>
                    <text>{{userRank.amountBuy}}</text>
                </view>
                <view class="jinbiImg">
                    <image class="jinbi" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/sort_num.png"></image>
                </view>
                <view class="gongxi">
                    <view class="huang">恭喜您击败了<text>{{rankBuy}}</text>%的用户</view>
                </view>
            </view>
        </view>
        <view class="king_til">
            <view class="paiming"><text class="colororg">出售排名</text><text class="jianshu">共计出售商品<text>{{userRank.sumSale}}</text>件</text></view>
            <view class="zongjine">
                <view class="jineone">
                    <text>总金额</text>
                    <text>{{userRank.amountSale}}</text>
                </view>
                <view class="jinbiImg">
                    <image class="jinbi" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/sort_up.png"></image>
                </view>
                <view class="gongxi ">
                    <view class="lv">恭喜您击败了<text>{{userRank.rankSale}}</text>%的用户</view>
                </view>
            </view>
        </view>
    </view>

</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import {
        USER_INFO,USER_SPECICAL_INFO
    } from '@/utils/constant';

    export default class meranking extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '我的排名',    // 头部标题
        }
        components = {

        }

        data = {
            userId:'',
            userRank:'',
            rankBuy:0
        }


        methods = {  // 方法

        }
        events = {

        }
        onLoad(){
            const t = this;
            let userId = wx.getStorageSync('userId');
            t.userId = userId;
            this.userGetUserRankFun();
        }

        /**
         * 获取用户排名
         * @returns {Promise.<void>}
         */
        async userGetUserRankFun() {
            const t = this;
            const a = await api.userGetUserRank({},t.userId);
            if (a.data.code == 0) {
                let l = a.data.data;
                t.userRank = l;
                if(t.userRank.rankBuy>=0.9){
                    t.rankBuy = 90;
                }else if(t.userRank.rankBuy<=0.3){
                    t.rankBuy = 30;
                }else {
                    t.rankBuy = 50;
                }
                t.$apply();
            } else {
                tip.error(a.data.msg);
            }
        }
    }

</script>
<style lang="less">
    .king{
        >view{
            margin-top: 20rpx;
        }
        .king_til{
            .paiming{
                background: #fff;
                padding: 20rpx;
                border-bottom: 1px solid #ddd;
                border-top: 1px solid #ddd;
                .colororg{
                    border-left: 4px solid orange;
                    padding-left: 20rpx;

                }
                .jianshu{
                    font-size: 26rpx;
                    color: #666;
                    padding-left: 20rpx;
                }
            }
            .zongjine{
                background: #fff;
                border-bottom: 1px solid #ddd;
                text-align: center;
                .jineone{
                    padding-top: 60rpx;
                    text{
                        vertical-align: middle;
                    }
                    text:first-child{
                        color: #666;
                    }
                    text:last-child{
                        color: #333333;
                        font-size: 40rpx;
                        padding-left: 30rpx;
                    }
                }
                .jinbiImg{
                    padding-top: 40rpx;
                    image{
                        width: 100rpx;
                        height: 100rpx;
                    }
                }
                .gongxi{
                    padding: 60rpx 0;
                    .huang{
                        background: #ffb60b;
                    }
                    .lv{
                        background: #7bc162;
                    }
                    >view{

                        width: 70%;
                        margin: 0 auto;
                        height: 70rpx;
                        line-height: 70rpx;
                        color: #fff;
                        border-radius: 10rpx;
                    }

                }
            }
        }
    }
</style>
